<template>
  <div data-v-3a82118a="" class="setting" style="top: 0px">
    <div data-v-3a82118a="" class="setting-bg">
      <div data-v-3a82118a="" class="setting-top">
        <span data-v-3a82118a="" class="left">头像</span>
        <div data-v-3a82118a="">
          <img data-v-3a82118a="" :src="imgSrc" class="right" />
          <i data-v-3a82118a="" class="ydwiconfont iconwode-shezhi-jiantou"></i>
        </div>
        <van-uploader :after-read="afterRead" class="inp" />
      </div>
    </div>
    <router-link to="/children/changenickname">
      <div data-v-3a82118a="" class="setting-bg">
        <div data-v-3a82118a="" class="setting-top">
          <span data-v-3a82118a="" class="left">昵称</span>
          <p data-v-3a82118a="">
            <span data-v-3a82118a="" class="right">{{$store.state.zlstore.userinfo.name}}</span>
            <i data-v-3a82118a="" class="ydwiconfont iconwode-shezhi-jiantou"></i>
          </p>
        </div>
      </div>
    </router-link>
    <router-link to="/children/address">
      <div data-v-3a82118a="" class="setting-bg">
        <div data-v-3a82118a="" class="setting-top">
          <span data-v-3a82118a="" class="left">收货地址</span>
          <i data-v-3a82118a="" class="ydwiconfont iconwode-shezhi-jiantou"></i>
        </div>
      </div>
    </router-link>
    <!---->
  </div>
</template>

<script>
import { imgUpload, userUpdate } from "@/api/zl-goods";
import { mapState } from "vuex";
export default {
  data() {
    return {
      imgSrc: "",
    };
  },
  computed: {
    ...mapState({
      userInfo: (state) => state.zlstore.userinfo,
    }),
  },
  methods: {
    async afterRead(file) {
      // 此时可以自行将文件上传至服务器

      let formData = new FormData();
      formData.append("avatar", file.file); //将文件资源整理为表单对象格式
      let imgdata = await imgUpload(formData); //上传头像
      let { url } = imgdata.data.data;
      this.imgSrc = `http://39.105.10.58:3000${url}`;
      let res = await userUpdate(this.userInfo._id, { avatar: url }); //更新用户表
      this.$store.commit("zlstore/initusreinfoMut", {
        //更新本地
        ...this.userInfo,
        avatar: url,
      });
    },
  },
  created() {
    if (this.userInfo && this.userInfo.avatar) {
      //初始化头像
      this.imgSrc = "http://39.105.10.58:3000" + this.userInfo.avatar;
    }else{
      this.imgSrc = 'https://images.yaodouwang.com/img/common/login.jpg'
    }
  },
};
</script>

<style lang="less" scoped>
/deep/ .inp {
  position: absolute;
  width: 100%;
  height: 100%;
}
/deep/ .van-uploader__upload {
  width: 100%;
  opacity: 0;
}
</style>